<!DOCTYPE html>
<html>
<head>
    <script src="/static/js/socket.io.min.4.3.1.js"></script>
    <script src="/static/js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">

        var socket =  io('http://'+document.domain+':'+location.port,
            {
                query:{'token':'123456'}
            }
        );
         // 1、接收服务器端，给connect事件的响应，token验证成功服务器端才允许连接
        socket.on('success', function(message) {
            // 处理从服务器接收到的响应数
            alert(message)
        });

        //2、 接收来自服务器的'handle_data'事件,返回的数据
        socket.on('handle_data', function(message) {
             console.log(message)
            // 处理从服务器接收到的响应数
            const msg = message.msg;
            const $showDiv = $('#show');
            const pElement = $('<p>').text(msg);
            //添加到展示的div标签中
            $showDiv.append(pElement);
        });

        //3、 发送'handle_data'事件给服务器d
        function sendMessage() {
            var message = {"type":"user","id":1};
            //向后端获取id=1的用户的数据
            socket.emit('handle_data',message); //可以直接返回字典等数据

        }
    </script>
</head>
<body>
    <div id="show">

    </div>
    <button onclick="sendMessage()">Send Message</button>

</body>
</html>